Hypocam

Redesign of a popular Black and White photography app

Hi-Fi Prototype

Introduction

I like to click abstract images, especially in black and white since they add mystery and drama to an image.

While searching for an app that would speed up my editing process, I came across Hypocam.

With over 1M+ Downloads, Hypocam was one of the best apps for b&w photo editing.

But after using it for a while, I felt there were some problems with its Interface and Experience as a whole, so I took upon a challenge to improve its overall Experience.

I tweeted my entire process in a thread, take a look at my candid process here

Process

For this redesign process, I chose to go with the Double Diamond process which consists of 4 stages.

1 Discovery: Building Empathy with stakeholders and understanding the existing system.

2 Define: Carrying out Usability Tests, Understanding User Flows, Competitor Analysis and Finding Solutions for Existing Design.

3 Explore: Design Thinking, Building Wireframe, and Prototypes.

4 Execute: Carrying out Usability Tests, Making Iterative changes, and building Hi-Fidelity Prototype.

01

Discovery

Building Empathy

The First step of the redesign process was to understand the needs of people who were directly or indirectly affected by it.

Deconstructing Existing Design

To understand the shortcoming of the current design, the First step was to understand what worked in Current design, what were various constraints and then improve on the design.

02

Define

Reviews

I wanted to know how existing users felt about the app, so I read through various reviews on the play store and the app store.

Based on these reviews I came at the following conclusion:

1. Overall User Interface of the app needs improvement.

2. Importing an Image in the current design is confusing.

3. Users are unexpectedly exiting the app.

4. User Experience needs improvement as there were many unnecessary taps.

Usability Tests

The Next step was to understand how the existing app was used by users.

The main goal of this test was to check how the user interacted and understand the flow of using the app.

For this, I gave users 3 tasks to complete and drew conclusions based on the same.

1. Open the app, click a pic, go to a gallery, choose the clicked pic, change its brightness, and change its hue.

2. Open the app, go to a gallery, import an image, then go to the camera interface.

3. Open the app, go to the camera interface, apply a filter, click a pic.

Understanding the User Needs

Based on Usability Tests, I wanted to understand a user's journey while using the app. Their motivations and what they expect from the apps

Competitor Analysis

Understanding Competitors, how are they achieved optimal experience, common patterns amongst them, and finding inspiration.

Key Problems

By observing how users interacted with current design and how the competitor apps work, I mapped out a few problems.

Possible Improvements

Based on how competitors work, I drew a rough estimate of possible improvements.

03

Explore

Design Thinking

Muscle Memory

Many photography apps that have camera features had similar layouts.

For example the camera interface was similar in many apps with subtle differences.

This made me realize that if the interface is similar, the task pattern will be subconscious, which in turn will help users to complete the task on a new app quickly.

Constraints

User : Users hate change ! So it was necessary to keep the design as close to the original design as possible.

Businesss : Since the main revenue is generated via selling filters, the store must be given equal priority.

Developer : the redesign shouldn't break existing code and the new design should be made while keeping developer constraints in mind.

"Don't make me think"

In IOS and Android, an app can't directly work on images.

They need to be first imported into the device workspace and then can be edited.

But in the app, by showing gallery along with albums, the users got confused and thought that the images were already imported so what's the need for another import?

The main goal is to give users a smooth experience with minimal thinking.

Wireframes

Based on Design thinking process, I did a few iterations of wireframes. The wireframe were sketched keeping in mind that the new design has to be similar to the old one with few necessary changes.

Prototype

Based on wireframes, I built a clickable prototype, this prototype went under a series of iterations and tests.

Mid-Fi Prototype

04

Execute

Validation

Based on the user test, a usability report was generated for the new design.

Hi-Fidelity

The next I built the visual aspects of the app, the visuals were close to an existing design.

Hi-Fi Prototype

Design Changes

Camera Interface

The first change was made in-camera interface.

After a series of interviews with photographers and casual users, I found out that users usually don't think about advanced settings like contrast, hue etc.

But at the same time photographers cared about features like 3 X 3 grid.

The new design removes all unnecessary features and is replaced with features that make photography experience better.

Gallery and Import

The second change was made in the gallery and how user imported images.

Instead of confusing users by showing imported images and on-device images under one workspace, I decided to show users only imported images and created a clear button that allowed users to import images from the device.

Editing Interface

The Third Change was done in Editing Interface.

While watching how users were using the app, I saw that many got frustrated due to confusing navigation.

Since icons were unique to the app, I decided to add labels to existing icons.

This increased readability which inturn reduced the number of taps and total time taken to complete a given task.

05

Lessons

Don't take anything for granted.

Extensive user research is important since it brings out the actual needs of various stakeholders and possible clashes between their needs.

"Simplification is one of the most difficult things to do" - John Ive While working on this redesign, I wanted to simplify how user interacted with the app. This helped me gain knowledge about photography, how Android and iOS works and how to design effectively.